<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">关注公众号</h3>
    <el-form
      :model="FollowForm"
      :show-message="false"
      ref="FollowForm">
      <div class="set-part mt20">
        <el-form-item label="样式" prop="blockClass">
          <div class="flex">
            <div class="val-show flex-1">{{FollowForm.blockClass | filterRadio(classOption)}}</div>
            <en-radio-tab
              :optionsData="classOption"
              :defaultData="FollowForm.blockClass"
              v-model="FollowForm.blockClass">
            </en-radio-tab>
          </div>
        </el-form-item>
        <el-form-item label="页面间距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="FollowForm.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="FollowForm.pagePadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="关注公众号地址" prop="url" required>
          <el-input v-model="FollowForm.url" placeholder="微信公众号文章地址"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import mixin from '../../mixin'

  export default {
    name: 'EnFollowPicker',
    mixins: [mixin],
    components: { draggable },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        FollowForm: {
          blockClass: 'row',
          pagePadding: 0,
          url: ''
        },

        classOption: [{
          value: 'row',
          label: '样式一',
          icon: 'fonticon-coupon-style1'
        },{
          value: 'fixed',
          label: '样式二',
          icon: 'fonticon-coupon-style2'
        }]
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.FollowForm = {
          ..._showData
        };
      }
    },
    methods: {
      handleConfirm() {
        this.$refs['FollowForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.FollowForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
</style>